<template>
  <div class="mind">
    <div class="container">
      <pre class="mermaid"
        >{{ mermaidCode }}
        </pre
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import mermaid from 'mermaid'; //引用mermaid
import { onMounted, ref } from 'vue';
const mermaidCode = ref('');

mermaidCode.value = `
  graph TD
      A[开发软件汇总] --> B[Java]
      B --> C{由谁创建}
      C --> D{James Gosling及其团队}
      C --> E(1995年首次发布)
      F[面向对象的编程语言] --> G[广泛应用于企业级开发、移动开发、Web应用、分布式应用等多个领域]
      A --> H[Python]
      H --> I{由谁创建}
      I --> J(Guido van Rossum设计并发布)
      I --> K(1991年)
      L[高级、解释型、通用的编程语言] --> M[广泛应用于数据分析、人工智能、Web开发、自动化脚本、科学计算等多个领域]
      A --> N[C++]
      N --> O{由谁创建}
      O --> P(Bjarne Stroustrup开始开发于1979年)
      O --> Q(1985年首次发布)
      R[通用的编程语言] --> S[系统编程、游戏开发、嵌入式系统、图形渲染等领域]
      A --> T[C#]
      T --> U{由谁推出}
      U --> V(微软于2000年推出，作为.NET平台的一部分)
      V --> W[现代化的、面向对象的编程语言] 
      W --> X[支持多种编程范式，包括OOP、函数式编程、事件驱动编程等]
      X --> Y[主要用于开发Windows应用程序、Web应用程序、游戏、移动应用等]
  `;

onMounted(() => {
  mermaid.initialize({ startOnLoad: true });
  mermaid.init();
});
</script>

<style scoped>
.mind {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.svg-container {
  flex: 1;
  svg {
    width: 100%;
    height: 100%;
  }
}
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
.controls {
  margin-top: 10px;
}

.read-the-docs {
  color: #888;
}
</style>
